<template>
  <div class="tool-wrapper">
    <template v-if="showDateTools">
      <div class="top-sec">
        <div class="tool-btns-wrapper van-hairline--bottom">
          <span class="cancel" @click="onCancelClick">取消</span>
          <p>选择时间</p>
          <span class="confirm" @click="onConfirmClick">确认</span>
        </div>
        <div class="date-btns-wrapper" v-if="showDateTypeBar && dateTypeConfig.length > 1">
          <span class="date-btn" v-for="(item, idx) in dateTypeConfig" :key="idx"
            :class="{ actived: item.dateType == dateType }" @click="handleDateTypeChange(item)">
            {{ item.dateTypeName }}
          </span>
        </div>
      </div>
      <div class="date-content">
        <!-- 选日  选周 -->
        <CalendarPicker ref="calendarPicker" v-show="['d', 'w'].includes(dateType)" :defCalendarView="defCalendarView"
          :showWeekIdx="showWeekIdx" :minDate="minDate" :maxDate="calendarMaxDate" :precisionMinMax="precisionMinMax"
          :selectionType="selectionType" :selectedDateInfo="selectedDateInfo" :selectedDateInfoArr="selectedDateInfoArr"
          :weekRangeStart="weekRangeStart" :weekRangeEnd="weekRangeEnd" :rangeStart="rangeStart" :rangeEnd="rangeEnd"
          :rangeStartText="config.rangeStartText" :rangeEndText="config.rangeEndText"
          :maxSelectDayCount="maxSelectDayCnt" :allDay="config.allDay" @invalidSelect="onInvalidSelect"
          @didSelectedDate="handleCalendarSelect" />
        <!-- 选月类型 -->
        <section class="month-base" v-show="dateType == 'm'">
          <div class="tool-base">
            <!-- @/assets/img/calendar/cal_db_leftarrow.png -->
            <div class="left">
              <img class="q-btn" src="@/assets/img/newhome/nh_cal_yl1.png"
                :class="{ disabled: monthTypeQuickBtnStatus.dbLeft == false }" alt="" @click="handleYearAction(-2)" />
            </div>
            <div class="mid">{{ curYearTitle }}</div>
            <div class="right">
              <img class="q-btn" src="@/assets/img/newhome/nh_cal_yr1.png" :class="{
                disabled: monthTypeQuickBtnStatus.dbRight == false,
              }" alt="" @click="handleYearAction(2)" />
            </div>
          </div>
          <div class="month-wrapper">
            <div class="month-item" v-for="(item, idx) in monthsData" :key="idx"
              :class="{ actived: item.isSelect, disabled: item.isDisabled }" @click="handleMonthAction(item)">
              {{ item.dateInfo }}
            </div>
          </div>
        </section>
        <!-- 选年 -->
        <section v-show="dateType == 'y'">
          <van-picker :columns="yearCols" swipe-duration="200" @change="handleYearPickerChange" ref="yearPicker"
            :default-index="defaultYIndex" />
        </section>
        <!-- 自定义 -->
        <section v-show="dateType == 'custom'">
          <van-picker :columns="customCols" swipe-duration="200" @change="handleCustomPickerChange"
            ref="customPicker" />
        </section>
      </div>
    </template>
  </div>
</template>

<script>
import CalendarPicker from "@/components/calendar/CalendarPicker2.vue";
import dayjs from "dayjs";
import { getWeekRangeByDiff } from "@/components/calendar/calendarTools.js";
import { deepCopy } from "@/js/helper.js";

var customParseFormat = require("dayjs/plugin/customParseFormat");
dayjs.extend(customParseFormat);

// 根据配置获取第一次的默认日期
export function getDefaultDateInfo(config) {
  const _typeArr = [
    { type: "d", name: "日" },
    { type: "w", name: "周" },
    { type: "m", name: "月" },
    { type: "y", name: "年" },
    { type: "custom", name: "自定义" },
  ];

  let def = void 0;
  for (const obj of _typeArr) {
    let key = obj.type;
    if (config.hasOwnProperty(key)) {
      def = obj;
      break;
    }
  }

  const { defDateType: defType } = config;

  if (defType) {
    let _find = _typeArr.find((e) => {
      return e.type === defType;
    });

    if (_find && config.hasOwnProperty(_find.type)) {
      def = _find;
    }
  }

  if (!def) {
    return {};
  }

  let obj = {
    dateType: def.type,
    dateTypeName: def.name,
  };

  if (def.type == "d") {
    const { dayType = "single" } = config;
    let d = config["d"];
    let defDate = dayjs().add(-1 * Number(d), "day");
    let _info = defDate.format("YYYY-MM-DD");

    if (dayType == "single") {
      obj.selectedDateInfo = _info;
    } else if (dayType == "range") {
      obj.rangeStart = _info;
      obj.rangeEnd = _info;
    }
  }

  if (def.type == "w") {
    let w = config["w"];
    let info = getWeekRangeByDiff(-1 * Number(w), 1);
    obj.weekRangeStart = info.start;
    obj.weekRangeEnd = info.end;
    obj.weekInfo = info.weekInfo;
  }

  if (def.type == "m") {
    let m = config["m"];
    let _tdate = dayjs().add(-1 * Number(m), "month");
    obj.selectedMonthInfo = _tdate.format("YYYY-MM");
  }

  if (def.type == "y") {
    let y = config["y"];
    let _tdate = dayjs().add(-1 * Number(y), "year");
    obj.selectedYearInfo = _tdate.format("YYYY");
  }

  if (def.type == "custom") {
    let custom = config["custom"];

    let _arr = custom.split(",");
    let _customArr = [];
    for (const val of _arr) {
      let itemVals = val.split("=");
      let obj = {
        val: itemVals[0],
        text: itemVals[1],
      };
      _customArr.push(obj);
    }

    if (_customArr.length) {
      obj.selectedCustomItem = _customArr[_customArr.length - 1];
    }
  }

  obj.isCurrent = true;
  return obj;
}

/**
 * 事件：
 * dateTypeChanged
 * invalidSelect
 * confirm
 * cancel
 */
export default {
  name: "DateTools",
  props: {
    /**
     * 后台给的日期配置  T-几
     * {
     *  d: "1",
     *  w: "2",
     *  m: "1",
     *  y: "0",
     *  custom: "val0=text0,val1=text1",
     *
     *  defDateType: "d",// 默认展示的类型，不设置的话为第一个值
     *  dayType: "single"(by default) | "range" | "multiple"
     *  rangeStartText: "开始"
     *  rangeEndText: "结束",
     *  maxSelectDayCount: 最大选择天数，range和multiple时 生效, 不满足条件时触发invalidSelect回调事件，回调事件参数包含选择天数
     * }
     */
    config: { type: Object, default: () => ({ d: 1 }) },
    showDateTypeBar: { type: Boolean, default: () => true }, // 顶部日期类型切换条

    // 最小日期 (string 或者 dayjs对象)
    minDate: { type: String | Object, default: "2022-01-01" },
    // 最大日期 (string 或者 dayjs对象)
    maxDate: { type: String | Object },
    precisionMinMax: Boolean, // min max 日历配置是否精确到日
    // 最大月份 (string 或者 dayjs对象)
    maxMonth: { type: String | Object },

    /**
     *  默认日历视图，日历首次打开时展示的月份
     *  today：默认值，今天所在的日期；
     *  selectedDate: 设置的默认日期；月份也可以使用该值
     *  start: 范围的起始值(包括周)
     *  end: 范围的结束值(包括周)
     *  “xxxx-xx-xx” 直接给具体的日期
     */
    defCalendarView: { type: String, default: "today" },
  },
  components: {
    CalendarPicker,
  },
  data() {
    return {
      showDateTools: false,
      dateTypeConfig: [],

      dateType: "",
      dateTypeInfo: "",
      defaultYIndex: 0,

      // 日历， 日和周
      calendarMaxDateTmp0: undefined, // 日类型最大日期
      calendarMaxDateTmp1: undefined, // 周类型最大日期

      tmpCalendarMaxDate: undefined,

      selectionType: "single",
      showWeekIdx: false,
      maxSelectDayCnt: undefined,

      // 存储初始日期，后面需要对比是否选的是默认的日期
      originDateInfo: {},

      // 日
      selectedDateInfo: "",
      rangeStart: "",
      rangeEnd: "",

      selectedDateInfoArr: [],

      // 周
      weekRangeStart: "",
      weekRangeEnd: "",
      weekInfo: "",

      // 选月份
      tmpCurMonthDate: undefined,
      maxMonthDate: undefined,
      monthsData: [],
      selectedMonthInfo: undefined, // dayjs().format("YYYY-MM"),

      // 选年
      yearCols: [],
      selectedYearInfo: undefined,

      // 自定义
      customCols: [],
      selectedCustomItem: undefined,
    };
  },
  watch: {
    "config.defDateType": function (newVal) {
      let find;
      if (this.dateTypeConfig) {
        for (const item of this.dateTypeConfig) {
          if (item.dateType == newVal) {
            find = item
            break
          }
        }
      }
      if (find) {
        // console.log('find', find)
        this.handleDateTypeChange(find, true)
      }

    }
  },
  computed: {
    calendarMaxDate: {
      get() {
        if (this.maxDate) {
          return this.maxDate;
        }
        return this.tmpCalendarMaxDate;
      },
      set(val) {
        this.tmpCalendarMaxDate = val;
      },
    },
    curMonthDate: {
      get() {
        if (!this.tmpCurMonthDate) {
          this.tmpCurMonthDate = dayjs();
          if (
            this.defCalendarView == "selectedDate" &&
            this.selectedMonthInfo
          ) {
            this.tmpCurMonthDate = dayjs(this.selectedMonthInfo, "YYYY-MM");
          }
        }
        return this.tmpCurMonthDate;
      },
      set(val) {
        this.tmpCurMonthDate = val;
      },
    },

    monthTypeQuickBtnStatus() {
      let obj = {
        dbLeft: true,
        dbRight: true,
      };
      if (this.curMonthDate.add(-1, "year").isBefore(this.minDate, "year")) {
        obj.dbLeft = false;
      }
      let maxDate = dayjs();
      if (this.curMonthDate.add(1, "year").isAfter(maxDate, "year")) {
        obj.dbRight = false;
      }
      return obj;
    },

    curYearTitle() {
      return this.curMonthDate.format("YYYY年");
    },
  },

  mounted() {
    this.setupTools();
  },

  methods: {
    setupTools() {
      const _initDateTypes = () => {
        let _tmp = [];
        const {
          d,
          w,
          m,
          y,
          custom,
          dayType = "single",
          maxSelectDayCount,
          defDateType,
          defDateD,
          defDateW,
          defDateM,
          defDateY,
          rangeStart = "",
          rangeEnd = "",
        } = this.config;
        this.maxSelectDayCnt = maxSelectDayCount;

        if (this.config.hasOwnProperty("d")) {
          // 日
          _tmp.push({
            dateType: "d",
            dateTypeName: "日",
            selectType: dayType,
            weekIdxTitle: "",
          });

          let defDate = dayjs().add(-1 * Number(d), "day");
          let defInfo = defDate.format("YYYY-MM-DD");
          this.calendarMaxDateTmp0 = defDate.endOf("year");

          if (dayType == "single") {
            if (defDateD) {
              this.selectedDateInfo = defDateD;
            } else {
              this.selectedDateInfo = defInfo;
            }

            if (!this.originDateInfo.selectedDateInfo) {
              // 存储初始值
              this.originDateInfo.selectedDateInfo = this.selectedDateInfo;
            }
          } else if (dayType == "range") {
            this.rangeStart = rangeStart || defInfo;
            this.rangeEnd = rangeEnd || defInfo;
            if (
              !(this.originDateInfo.rangeStart && this.originDateInfo.rangeEnd)
            ) {
              // 存储初始值
              this.originDateInfo.rangeStart = rangeStart || defInfo;
              this.originDateInfo.rangeEnd = rangeEnd || defInfo;
            }
          }
        }
        if (this.config.hasOwnProperty("w")) {
          // 周
          _tmp.push({
            dateType: "w",
            dateTypeName: "周",
            selectType: "week",
            weekIdxTitle: "周",
          });
          let info = getWeekRangeByDiff(-1 * Number(w), 1);
          if (defDateW) {
            info = defDateW;
          }
          this.weekRangeStart = info.start;
          this.weekRangeEnd = info.end;
          this.weekInfo = info.weekInfo;

          if (!this.originDateInfo.weekInfo) {
            // 存储初始值
            this.originDateInfo.weekRangeStart = info.start;
            this.originDateInfo.weekRangeEnd = info.end;
            this.originDateInfo.weekInfo = info.weekInfo;
          }
          this.calendarMaxDateTmp1 = dayjs(info.start).endOf("year");
        }
        if (this.config.hasOwnProperty("m")) {
          // 月
          _tmp.push({ dateType: "m", dateTypeName: "月" });
          let _tdate;
          if (this.maxMonth) {
            _tdate = dayjs(this.maxMonth);
          } else {
            _tdate = dayjs().add(-1 * Number(m), "month");
          }
          this.maxMonthDate = _tdate;

          let defInfo = _tdate.format("YYYY-MM");
          if (defDateM) {
            defInfo = defDateM;
            //让首次显示的月份是选中的月份
            this.curMonthDate = dayjs(defDateM);
          }
          this.selectedMonthInfo = defInfo;

          if (!this.originDateInfo.selectedMonthInfo) {
            // 存储初始值
            this.originDateInfo.selectedMonthInfo = defInfo;
          }
        }

        if (this.config.hasOwnProperty("y")) {
          // 年
          _tmp.push({ dateType: "y", dateTypeName: "年" });

          let _year = dayjs()
            .add(-1 * Number(y), "year")
            .year();

          let _minYear = dayjs(this.minDate).year();
          if (_year < _minYear) {
            _year = _minYear;
          }

          let _yearArr = [];
          for (let i = 0; i < _year + 1 - _minYear; i++) {
            let s = String(_minYear + i);
            _yearArr.push(s);
          }
          //年的默认值回显
          if (defDateY) {
            for (let i = 0; i < _yearArr.length; i++) {
              if (defDateY == _yearArr[i]) {
                this.defaultYIndex = i;
                break;
              }
            }
          } else {
            this.defaultYIndex = _yearArr.length - 1;
          }
          //end
          this.yearCols = _yearArr;
        }
        if (this.config.hasOwnProperty("custom")) {
          _tmp.push({ dateType: "custom", dateTypeName: "自定义" });
          let _arr = custom.split(",");
          let _customArr = [];
          for (const val of _arr) {
            let itemVals = val.split("=");
            let obj = {
              val: itemVals[0],
              text: itemVals[1],
            };
            _customArr.push(obj);
          }
          this.customCols = _customArr;
        }

        if (_tmp.length) {
          let first = _tmp[0];
          //defDateType 参数生效 20231219
          if (defDateType) {
            for (let i = 0; i < _tmp.length; i++) {
              if (defDateType == _tmp[i].dateType) {
                first = _tmp[i];
                break;
              }
            }
          }
          //end
          this.dateType = first.dateType;
          this.dateTypeName = first.dateTypeName;
          if (first.selectType) {
            this.selectionType = first.selectType;
          }
        }

        return _tmp;
      };

      this.dateTypeConfig = _initDateTypes();
      // console.log("this.selectedDateInfo", this.selectedDateInfo);

      if (this.dateTypeConfig.length) {
        this.showDateTools = true;

        let def = this.dateTypeConfig[0];
        if (this.config?.defDateType) {
          let setDef = this.dateTypeConfig.find((e) => {
            return e.dateType === this.config?.defDateType;
          });

          if (setDef) {
            def = setDef;
          }
        }
        this.$nextTick(() => {
          this.handleDateTypeChange(def);
        });
      }
    },

    // 日历回调
    handleCalendarSelect(info, type) {
      // console.log("handleCalendarSelect", info);

      const {
        selectedDateInfo,
        selectedDateInfoArr,
        weekRangeStart,
        weekRangeEnd,
        weekInfo,
        rangeStart,
        rangeEnd,
      } = info;
      if (type == "single") {
        this.selectedDateInfo = selectedDateInfo;
      }

      if (type == "range") {
        this.rangeStart = rangeStart;
        this.rangeEnd = rangeEnd;
      }
      if (type == "multiple") {
        this.selectedDateInfoArr = selectedDateInfoArr;
      }

      if (type == "week") {
        this.weekRangeStart = weekRangeStart;
        this.weekRangeEnd = weekRangeEnd;
        this.weekInfo = weekInfo;
      }
    },


    handleDateTypeChange(item, preventCallback = false) {
      // 用户点击时 才触发回调，外部由defDateType修改时  不回调
      this.dateType = item.dateType;
      this.dateTypeName = item.dateTypeName;
      if (!preventCallback) {
        this.$emit("dateTypeChanged", {
          dateType: this.dateType,
          dateTypeName: this.dateTypeName,
        });
      }


      // 日历
      if (this.dateType == "d") {
        this.calendarMaxDate = this.calendarMaxDateTmp0;
        this.selectionType = item.selectType;
        this.showWeekIdx = false;
      }
      if (this.dateType == "w") {
        this.calendarMaxDate = this.calendarMaxDateTmp1;
        this.selectionType = item.selectType;
        this.showWeekIdx = true;
      }
      if (this.dateType == "m") {
        this.reloadMoths();
      }

      if (this.dateType == "y") {
        this.setDefaultYear();
      }

      if (this.dateType == "custom") {
        this.setCustomDefaultItem();
      }
    },
    handleYearAction(val) {
      // console.log(val);
      if (val < 0) {
        if (!this.monthTypeQuickBtnStatus.dbLeft) {
          return;
        }
        this.curMonthDate = this.curMonthDate.add(-1, "year");
      } else {
        if (!this.monthTypeQuickBtnStatus.dbRight) {
          return;
        }
        this.curMonthDate = this.curMonthDate.add(1, "year");
      }
      this.reloadMoths();
    },
    handleMonthAction(item) {
      if (item.isDisabled) {
        return;
      }
      this.selectedMonthInfo = item.origin.format("YYYY-MM");
      this.reloadMoths();
    },
    reloadMoths() {
      let date0 = this.curMonthDate.month(0);

      let tmp = [];
      for (let index = 0; index < 12; index++) {
        let _date = date0.add(index, "month");
        let obj = {
          origin: _date,
          dateInfo: _date.format("M月"),
          isSelect: _date.isSame(this.selectedMonthInfo, "month"),
          isDisabled: _date.isAfter(this.maxMonthDate, "month"),
        };
        if (this.minDate && this.precisionMinMax) {
          obj.isDisabled =
            _date.isBefore(this.minDate, "month") ||
            _date.isAfter(this.maxMonthDate, "month");
        }
        tmp.push(obj);
      }
      this.monthsData = tmp;
    },
    // 选年
    setDefaultYear() {
      if (this.selectedYearInfo == undefined) {
        let defInfo = this.yearCols[this.yearCols.length - 1];
        this.selectedYearInfo = defInfo;
        // this.$refs.yearPicker.setColumnIndex(0, this.yearCols.length - 1);

        if (!this.originDateInfo.selectedYearInfo) {
          // 存储初始值
          this.originDateInfo.selectedYearInfo = defInfo;
        }
      }
    },
    handleYearPickerChange(picker, value, idx) {
      // console.log(value);
      this.selectedYearInfo = value;
    },

    // 自定义
    setCustomDefaultItem() {
      if (this.selectedCustomItem == undefined) {
        let defInfo = this.customCols[this.customCols.length - 1];
        this.selectedCustomItem = defInfo;
        this.$refs.customPicker.setColumnIndex(0, this.customCols.length - 1);

        if (!this.originDateInfo.selectedCustomItem) {
          // 存储初始值
          this.originDateInfo.selectedCustomItem = deepCopy(defInfo);
        }
      }
    },
    handleCustomPickerChange(picker, value, idx) {
      this.selectedCustomItem = value;
    },
    // 检查是否选中初始值
    checkIsOrigin(obj) {
      let t = false;

      if (obj.dateType == "d") {
        t = obj.selectedDateInfo == this.originDateInfo.selectedDateInfo;
      } else if (obj.dateType == "w") {
        t =
          obj.weekRangeStart == this.originDateInfo.weekRangeStart &&
          obj.weekRangeEnd == this.originDateInfo.weekRangeEnd &&
          obj.weekInfo == this.originDateInfo.weekInfo;
      } else if (obj.dateType == "m") {
        t = obj.selectedMonthInfo == this.originDateInfo.selectedMonthInfo;
      } else if (obj.dateType == "y") {
        t = obj.selectedYearInfo == this.originDateInfo.selectedYearInfo;
      } else if (obj.dateType == "custom") {
        let _o = this.originDateInfo.selectedCustomItem;
        if (_o) {
          let keys = Object.keys(_o);
          if (keys.length) {
            let _k = keys[0];
            t = obj.selectedCustomItem[_k] == _o[_k];
          }
        }
      }
      return t;
    },

    onConfirmClick() {
      if (this.config.dayType == "range") {
        if (this.dateType == "d") {
          if (!(this.rangeStart && this.rangeEnd)) {
            this.$toast("请选择完整日期范围");
            return;
          }
        }
        if (this.dateType == "w") {
          if (!(this.weekRangeStart && this.weekRangeEnd)) {
            this.$toast("请选择完整日期范围");
            return;
          }
        }
      }

      if (this.config.dayType == "multiple") {
        if (!this.selectedDateInfoArr.length) {
          this.$toast("请至少选择1天");
          return;
        }
      }

      let obj = {
        dateType: this.dateType,
        dateTypeName: this.dateTypeName,
        selectedDateInfo: this.selectedDateInfo,
        rangeStart: this.rangeStart,
        rangeEnd: this.rangeEnd,
        selectedDateInfoArr: this.selectedDateInfoArr,

        weekRangeStart: this.weekRangeStart,
        weekRangeEnd: this.weekRangeEnd,
        weekInfo: this.weekInfo,

        selectedMonthInfo: this.selectedMonthInfo,
        selectedYearInfo: this.selectedYearInfo,
        selectedCustomItem: this.selectedCustomItem,
      };
      obj.isCurrent = this.checkIsOrigin(obj);
      // console.log("DateTools点击确定", obj);
      this.$emit("confirm", obj, true);
    },

    onCancelClick() {
      // console.log("点击取消");
      this.$emit("cancel");
    },

    onInvalidSelect(info) {
      // console.log('info',info)
      this.$emit("invalidSelect", info);
    },

    // 重置日期
    resetDate({ type, date }) {
      this.dateType = type;
      if (type == "d") {
        this.selectedDateInfo = date[0];
        this.$refs.calendarPicker?.handleDayClick({
          dateInfo: this.selectedDateInfo,
        });
      }
      this.$nextTick(() => {
        this.$refs.calendarPicker?.reloadDefDate();
        this.$refs.calendarPicker?.reloadCalendarData();
      });
    },
  },
};
</script>

<style lang="scss" scoped>
// 日历高度 280  工具栏100
.tool-wrapper {
  padding-bottom: 34px;

  .top-sec {
    .tool-btns-wrapper {
      // height: 50px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 60px;
      padding: 0 24px;

      // p {
      //   font-size: 18px;
      //   font-weight: bold;
      //   color: #222222;
      // }
      // span {
      //   display: flex;
      //   width: 44px;
      //   height: 44px;
      //   align-items: center;
      //   justify-content: center;
      //   font-size: 16px;
      //   color: #999999;
      // }
      // .cancel {
      //   margin-left: 10px;
      // }
      // .confirm {
      //   margin-right: 10px;
      //   font-weight: bold;
      //   color: #222222;
      // }
      span,
      p {
        display: flex;
        align-items: center;
        justify-content: center;
      }

      p {
        font-size: 18px;
        font-weight: 400;
        color: #070a0f;
        line-height: 26px;
      }

      span {
        font-size: 16px;
        font-weight: 400;
        color: #383b3f;
        line-height: 24px;
      }

      .cancel {
        color: #9b9d9f;
      }
    }

    .date-btns-wrapper {
      height: 50px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 15px;

      .date-btn {
        flex: 1;
        display: flex;
        justify-content: center;
        font-size: 12px;
        height: 32px;
        background: #f2f2f2;
        border-radius: 8px;
        align-items: center;

        &:not(:first-of-type) {
          margin-left: 12px;
        }

        &.actived {
          background: #1678ff1a;
          border: 1px solid $main-color;
          color: $main-color;
        }
      }
    }
  }

  .tool-base {
    // height: 44px;
    // display: flex;
    // align-items: center;
    // justify-content: space-between;
    // padding: 5px 16px;
    // font-size: 18px;
    // font-weight: bold;
    // color: #222222;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 16px;
    font-size: 16px;
    font-weight: 400;
    color: #383b3f;
    line-height: 24px;
    background-color: #f8f8f8;

    .q-btn {
      // width: 22px;
      display: block;
      width: 30px;
      height: 24px;
      background: #ffffff;
      box-shadow: 0px 0px 1px 0px rgba(0, 0, 0, 0.25);
      border-radius: 2px;

      &:first-of-type {
        margin-right: 16px;
      }

      &.disabled {
        opacity: 0.5;
        -webkit-filter: grayscale(100%);
        filter: grayscale(100%);
      }
    }
  }
}

.date-content {
  height: 335px;

  // .month-wrapper {
  //   margin: 34px 15px;
  //   display: grid;
  //   grid-template-columns: repeat(4, 1fr);
  //   justify-items: center;
  //   align-items: center;
  //   grid-column-gap: 20px;
  //   grid-row-gap: 15px;
  //   .month-item {
  //     width: 40px;
  //     height: 40px;
  //     display: flex;
  //     justify-content: center;
  //     align-items: center;
  //     font-size: 16px;
  //     font-weight: bold;
  //     color: #222222;

  //     &.actived {
  //       background: #fabe00;
  //       border-radius: 8px;
  //     }
  //     &.disabled {
  //       color: #ddd;
  //     }
  //   }
  // }
  .month-wrapper {
    margin: 10px 15px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    justify-items: center;
    align-items: center;
    grid-column-gap: 20px;
    grid-row-gap: 15px;

    .month-item {
      width: 40px;
      height: 40px;
      display: flex;
      justify-content: center;
      align-items: center;

      font-size: 18px;
      font-weight: 400;
      color: #070a0f;
      line-height: 26px;

      &.actived {
        color: #1678ff;
        border-radius: 8px;
      }

      &.disabled {
        color: #cdcecf;
      }
    }
  }
}

@media screen and (orientation: landscape) and (max-device-height: 400px) {
  .tool-wrapper {
    padding-bottom: 20px;
  }

  .date-content {
    height: 200px;

    .month-wrapper {
      margin: unset;
    }
  }
}
</style>
